<template>
  <view class="log-panel">
    <view class="log-header">
      <text class="log-title">运行日志</text>
      <view class="log-buttons">
        <button class="log-button copy-button" @click="copyAllLogs">
          <text class="button-icon">📋</text>
          复制日志
        </button>
        <button class="log-button clear-button" @click="$emit('clear')">
          <text class="button-icon">🗑️</text>
          清空日志
        </button>
      </view>
    </view>
    <scroll-view 
      class="log-content" 
      scroll-y 
      :scroll-top="scrollTo"
      :scroll-with-animation="true"
    >
      <view 
        v-for="(log, index) in logs" 
        :key="index"
        :id="'log-' + index"
        class="log-entry"
      >
        <text class="log-text" selectable="true">{{ log }}</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  logs: {
    type: Array,
    default: () => []
  },
  scrollTo: {
    type: String,
    default: ''
  }
});

const emit = defineEmits(['clear']);

const copyAllLogs = () => {
  try {
    // 格式化所有日志
    const formattedLogs = props.logs.join('\n\n');
    
    // 使用 uni-app 的复制功能
    uni.setClipboardData({
      data: formattedLogs,
      success: () => {
        uni.showToast({
          title: '日志已复制到剪贴板',
          icon: 'success',
          duration: 2000
        });
      },
      fail: (err) => {
        uni.showToast({
          title: '复制失败: ' + err.errMsg,
          icon: 'none',
          duration: 3000
        });
      }
    });
  } catch (e) {
    uni.showToast({
      title: '复制失败: ' + e.message,
      icon: 'none',
      duration: 3000
    });
  }
};
</script>

<style>
.log-panel {
  background-color: white;
  border-radius: 20rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding-bottom: 10rpx;
  border-bottom: 1px solid #eee;
}

.log-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #2c3e50;
}

.log-buttons {
  display: flex;
  gap: 12rpx;
}

.log-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  padding: 8rpx 20rpx;
  border-radius: 4rpx;
  border: 1px solid #e4e7ed;
  background-color: #f5f7fa;
  color: #606266;
  transition: all 0.2s ease;
}

.log-button:active {
  transform: translateY(1rpx);
  opacity: 0.8;
}

.copy-button {
  background-color: #e8f5e9;
  color: #4caf50;
  border-color: #c8e6c9;
}

.copy-button:active {
  background-color: #c8e6c9;
}

.clear-button {
  background-color: #ffebee;
  color: #f44336;
  border-color: #ffcdd2;
}

.clear-button:active {
  background-color: #ffcdd2;
}

.button-icon {
  font-size: 24rpx;
  margin-right: 4rpx;
}

.log-content {
  height: 600rpx;
  background-color: #f8f9fa;
  border-radius: 8rpx;
  padding: 20rpx;
}

.log-entry {
  margin-bottom: 10rpx;
  font-family: monospace;
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 24rpx;
  line-height: 1.5;
  color: #2c3e50;
}

.log-text {
  display: block;
  padding: 10rpx;
  background-color: #fff;
  border-radius: 4rpx;
  border: 1px solid #eee;
}

@media screen and (min-width: 768px) {
  .log-content {
    height: 800rpx;
  }
  
  .log-button {
    font-size: 28rpx;
    padding: 10rpx 24rpx;
  }
  
  .button-icon {
    font-size: 28rpx;
  }
}
</style> 